<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            #main {
                height: 420px;
                width: 360px;
                border: 10px #000 solid;
                background-color: #b7d4a8;
                border-radius: 20px;
                margin: 50px auto;
            }

            #stage {
                width: 304px;
                height: 304px;
                border: 2px solid #000;
                margin: 20px auto;
                position: relative;
            }

            #snake > div {
                width: 10px;
                height: 10px;
                background-color: #000;
                position: absolute;
            }

            #food {
                width: 10px;
                height: 10px;
                position: absolute;
                top: 100px;
                left: 120px;
                display: flex;
                flex-flow: wrap;
            }

            #food > div {
                width: 5px;
                height: 5px;
                background-color: #000;
                transform: rotate(45deg);
            }

            #info {
                width: 304px;
                margin: 0px auto;
                display: flex;
                justify-content: space-between;
                font: bold 20px courier;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="stage">
                <div id="snake">
                    <div></div>
                </div>

                <div id="food">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>

            <div id="info">
                <div>SCORE:<span id="score">100</span></div>
                <div>LEVEL:<span id="level">1</span></div>
            </div>
        </div>

        <script>
            // 获取蛇的容器
            const snake = document.getElementById("snake")
            // 获取蛇的各个部分
            const snakes = snake.getElementsByTagName("div")

            const head = snakes[0]

            /* 
                绑定按键事件keydown keyup 
                    - 键盘事件只能绑定给可以获取焦点的元素或者是document    
            */
            document.addEventListener("keydown", (event) => {
                /* 通过事件对象可以读取到用户按的是那个按键 */
                // console.log(event.keyCode)
                // console.log(event.key)

                // if(event.key === "ArrowUp"){
                //     console.log("↑")
                // }

                /*
                    当我们按着某个按键不松开时，按键按下事件会持续触发
                        但是第一次和第二次触发的间隔会比较长
                        这样导致练习中蛇不能流畅的移动
                    
                    贪食蛇的游戏，蛇是不能停止运动的
                */
                switch (event.key) {
                    case "ArrowUp":
                        // 向上移动蛇
                        head.style.top = head.offsetTop - 10 + "px"
                        break
                    case "ArrowDown":
                        // 向下移动蛇
                        head.style.top = head.offsetTop + 10 + "px"
                        break
                    case "ArrowLeft":
                        // 向左移动蛇
                        head.style.left = head.offsetLeft - 10 + "px"
                        break
                    case "ArrowRight":
                        // 向右移动蛇
                        head.style.left = head.offsetLeft + 10 + "px"
                        break
                }
            })
        </script>
    </body>
</html>
